import React from 'react'
import { CapsuleTabs, Radio, Button } from 'antd-mobile'
import { useSelector, useDispatch } from "react-redux";
import { ResultPage, Card } from 'antd-mobile'
import style from './Css/home.module.css'
import { LoopOutline } from 'antd-mobile-icons'
import { useNavigate } from 'react-router-dom'
function Index() {
    let nav = useNavigate()
    const start = useSelector((store) => store.counter.start);
    const end = useSelector((store) => store.counter.end);
    const date = useSelector((store) => store.counter.date);
    const isSpeed = useSelector((store) => store.counter.isSpeed);
    const dispatch = useDispatch();


    const tiaoz = () => {
        nav(`/cart?start=${start}&end=${end}&date=${date}&isSpeed=${isSpeed}`)
    }
    return (
        <div className={style.box}>
            <ResultPage
                status=''
                title=''
                description=''
                className={style.box}
            >
                <ResultPage.Card style={{ padding: 8 }}>
                    <CapsuleTabs>
                        <CapsuleTabs.Tab title='机票' key='fruits'>
                            <div className={style.row}>
                                <span className={style.pp}>{start}</span>
                                <LoopOutline />
                                <span className={style.pp}>{end}</span>
                            </div>
                            <div className={style.row}>
                                <span >
                                    <span className={style.pp}>
                                        {date}
                                    </span>
                                    <span>
                                        （今天）
                                    </span>
                                </span>
                            </div>
                            <div className={style.row}>
                                <span className={style.pp}>学生票<Radio /></span>
                                <span className={style.pp}>高铁动车<Radio /></span>
                            </div>
                            <div className={style.row}>
                                <Button block color='primary' size='middle' onClick={tiaoz}>
                                    查询
                                </Button>
                            </div>
                        </CapsuleTabs.Tab>
                        <CapsuleTabs.Tab title='国内火车' key='vegetables'>
                            国内火车
                        </CapsuleTabs.Tab>
                        <CapsuleTabs.Tab title='国际/港台' key='animals'>
                            国际/港台
                        </CapsuleTabs.Tab>
                        <CapsuleTabs.Tab title='汽车票' key='animal'>
                            汽车票
                        </CapsuleTabs.Tab>
                    </CapsuleTabs>
                </ResultPage.Card>

                <Card style={{ marginTop: 12 }}></Card>
            </ResultPage>
        </div>
    )
}

export default Index
